import React, { Component } from 'react'
import './list.css'
import PubSub from 'pubsub-js'
export default class list extends Component {
    state = { //初始化状态
		users:[], //users初始值为数组
		isFirst:true, //是否为第一次打开页面
		isLoading:false,//标识是否处于加载中
		err:'',//存储请求相关的错误信息
	} 
    componentDidMount(){
        this.token=PubSub.subscribe("gitxx",(_,data)=>{//函数有两个参数_是占位符
            this.setState(data)
        })
    }
    componentWillMount(){
        PubSub.unsubscribe(this.token)
    }
    render() {
        const {users,isFirst,isLoading,err} =this.state
        console.log(users)
        return (
            <div className="row">
                {
                    isFirst ? <h2>欢迎使用，输入关键字，随后点击搜索</h2>: 
					isLoading ? <h2>Loading......</h2> :
					err ? <h2 style={{color:'red'}}>{err}</h2> :
                    users.map((user)=>{
                        return(
                        <div className='card'key={user.id}>
                            <a rel="noreferrer" href={user.html_url} target="_blank">
                            <img alt="head_portrait" src={user.avatar_url} style={{width:'100px'}}/>
                            </a>
                            <p className="card-text">{user.login}</p>
                        </div>
                        )
                    })
                }
            </div>
        )
    }
}
